import { useEffect, useState, useRef } from 'react'
import {
    Input,
    Card,
    Grid,
    Divider,
    Switch,
    ProgressCircle,
    Toast,
} from 'antd-mobile'


import http from '../helper/http';
import styles from '@/assets/css/mine.module.less'
import { PageModel } from '@/models/PageModel';
import dayjs from 'dayjs';
import type { ToastHandler } from 'antd-mobile/es/components/toast'

export default () => {
    const handler = useRef<ToastHandler>()

    const cacheWorkCount = localStorage.getItem('workcount') ?? '0'
    const [workcount, setWorkCount] = useState(cacheWorkCount);
    const [workcountEq0, setWorkCountEq0] = useState(0);
    const [workcountCurrent, setWorkcountCurrent] = useState(0);
    const [timecountCurrent, setTimecountCurrent] = useState(0);
    const defaultThemeChecked = localStorage.getItem('color-scheme') === 'dark';

    useEffect(() => {
        if (workcount.length > 0) {
            localStorage.setItem('workcount', workcount)
            setWorkCountEq0(Math.ceil((parseInt(workcount) ?? 0) * 0.7))
        } else {
            setWorkCountEq0(0)
        }
    }, [workcount])

    useEffect(() => {
        handler.current = Toast.show({
            icon: 'loading',
            content: '加载中',
            duration: 0,
        })

        const loadData = () => {
            const groupby = ['YYYY-MM']
            const keywords = localStorage.getItem('username') ?? ''
            const dt1date = dayjs().date(1).toDate()
            const dt2date = dayjs().date(1).add(1, 'month').add(-1, 'day').toDate()
            const page: PageModel = { page: 1, size: 20, groupby, keywords, date1: dt1date, date2: dt2date }

            const params = Object.assign({}, page, {
                date1: dayjs(page.date1).format('YYYY-MM-DD'),
                date2: dayjs(page.date2).format('YYYY-MM-DD'),
                groupby: page.groupby[0],
                keywords: encodeURI(page.keywords)
            })

            http.get('/work-list', { params }).then(res => {
                const data = res.data
                const rows = data.rows
                if (rows.length > 0) {
                    const wkc = rows[0]['WORK_COUNT']
                    const wlt = rows[0]['WORK_TIME']
                    setWorkcountCurrent(wkc)
                    setTimecountCurrent(wlt)
                } else {
                    setWorkcountCurrent(0)
                    setTimecountCurrent(0)
                }
                handler.current?.close()
            });
        }

        loadData()
    }, [])

    const themeChange = (dark: boolean) => {
        localStorage.setItem('color-scheme', dark ? 'dark' : 'light');
        if (dark) {
            document.documentElement.setAttribute(
                'data-prefers-color-scheme',
                'dark'
            )
        } else {
            document.documentElement.setAttribute(
                'data-prefers-color-scheme',
                'light'
            )
        }
    }

    return (
        <div className={styles.mine}>

            <Card className={styles.card} title="我的工作量" extra={
                <Switch onChange={themeChange} defaultChecked={defaultThemeChecked} checkedText='深色模式' uncheckedText='浅色模式'></Switch>
            }>
                <Grid className={styles['grid']} columns={2} gap={8}>
                    <Grid.Item>
                        <div className={styles['label']}>
                            每月额定工作量
                        </div>
                    </Grid.Item>
                    <Grid.Item>
                        <Input type="number" onChange={setWorkCount} value={workcount} placeholder='额定工作量' />
                    </Grid.Item>
                </Grid>
                <Grid className={styles['grid']} columns={2} gap={8}>
                    <Grid.Item>
                        <div className={styles['label']}>
                            绩效为0判定线(70%)
                        </div>
                    </Grid.Item>
                    <Grid.Item>
                        <span>{workcountEq0}</span>
                    </Grid.Item>
                </Grid>
                <Divider contentPosition='left'>我的进度</Divider>
                <Grid className={styles['grid']} columns={2} gap={8}>
                    <Grid.Item>
                        <div className={styles['label']}>
                            本月已完成工作量
                        </div>
                    </Grid.Item>
                    <Grid.Item>
                        {workcountCurrent}
                    </Grid.Item>
                </Grid>
                <Grid className={styles['grid']} columns={2} gap={8}>
                    <Grid.Item>
                        <div className={styles['label']}>
                            本月工单小时数
                        </div>
                    </Grid.Item>
                    <Grid.Item>
                        {timecountCurrent}
                    </Grid.Item>
                </Grid>
                <Grid className={styles['grid']} columns={2} gap={8}>
                    <Grid.Item>
                        <div className={styles['label']}>
                            本月剩余工作量
                        </div>
                    </Grid.Item>
                    <Grid.Item>
                        {(parseInt(workcount) ?? 0) - workcountCurrent}
                    </Grid.Item>
                </Grid>
                <Grid className={styles['grid']} columns={2} gap={8}>
                    <Grid.Item>
                        <div className={styles['label']}>
                            本月进度
                        </div>
                    </Grid.Item>
                    <Grid.Item>
                        <ProgressCircle percent={(workcountCurrent * 100 / (parseInt(workcount) ?? 1))} style={{ '--track-width': '4px' }}>
                            {(workcountCurrent * 100 / (parseInt(workcount) ?? 1)).toFixed(2) + '%'}
                        </ProgressCircle>
                    </Grid.Item>
                </Grid>
                <Divider contentPosition='left'>加班补贴规则</Divider>
                <Grid className={styles['grid']} columns={1} gap={8}>
                    <Grid.Item>
                        <div className={styles['label2']}>
                            <p>100%以上的20元/小时；</p>
                            <p>90%以上的15元/小时；</p>
                            <p>80%以上的10元/每小时;</p>
                        </div>
                    </Grid.Item>
                </Grid>
            </Card>

        </div >
    )
}